<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>CodePen Embed</title>
  <link rel="stylesheet" href="/stylesheets/css/embed.css">
</head>

<body>

  <nav class="group">
    <!-- These should say preprocessor if there is one -->
    <% if @data['html'] %>
    <a id="html-link" class="active">HTML</a>
    <% end %>
    <% if @data['css'] %>
    <a id="css-link" >CSS</a>
    <% end %>
    <% if @data['js'] %>
    <a id="js-link" >JS</a>
    <% end %>
    <a id="result-link" >Result</a>
  </nav>

  <div id="output">
    <% if @data['html'] %>
    <div id="html-box" class="active">
        <textarea id="html" class="code-box" cols="50" rows="25"><%= @data['html'] %></textarea>
    </div>
    <% end %>
    
    <% if @data['css'] %>
    <div id="css-box">
        <textarea id="css" class="code-box" cols="50" rows="25"><%= @data['css'] %></textarea>
    </div>
    <% end %>
    
    <% if @data['js'] %>
    <div id="js-box">
        <textarea id="js" class="code-box" cols="50" rows="25"><%= @data['js'] %></textarea>
    </div>
    <% end %>
    
    <div id="result-box">
        <iframe allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none"  src="<%= @iframe_src %>" id="result"></iframe>
    </div>

  </div>

  <script>
    Data = <%= stringify(@data) %>;
  </script>
  
  <%= js_scripts([
      '/js/libs/jquery.js',
      '/js/libs/codemirror.js',
      '/js/mode/javascript/javascript.js',
      '/js/mode/css/css.js',
      '/js/mode/xml/xml.js',
      '/js/util.js',
      '/js/embed/embed_code_editor.js',
      '/js/embed/embed.js'
      ], 'embed')
  %>

</body>

</html>